<template>
  <div class="hello-subapp">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>Hello 子应用（Vue2 SFC + ElementUI + Vuex）</span>
          <el-button size="small" type="primary" @click="incrementCount">计数: {{ count }}</el-button>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-alert title="功能特性" type="info" :closable="false">
            <ul>
              <li>Vue2 SFC 组件化开发</li>
              <li>ElementUI 组件库</li>
              <li>Vuex 状态管理</li>
              <li>响应式数据绑定</li>
            </ul>
          </el-alert>
        </el-col>
        <el-col :span="12">
          <el-form>
            <el-form-item label="用户名">
              <el-input v-model="username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="showMessage">显示消息</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      
      <el-divider content-position="left">用户列表</el-divider>
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="editUser(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'HelloSubApp',
  data() {
    return {
      username: ''
    }
  },
  computed: {
    ...mapState(['count', 'userList'])
  },
  methods: {
    ...mapMutations(['incrementCount']),
    ...mapActions(['fetchUsers', 'deleteUser']),
    showMessage() {
      this.$message.success(`欢迎 ${this.username || '用户'}！`)
    },
    editUser(user) {
      this.$message.info(`编辑用户: ${user.name}`)
    },
    async init() {
      await this.fetchUsers()
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
.hello-subapp { padding: 16px; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
</style>


